@import "./config";
@import "./color";
@import "./mixin";
@import "./cropper";
@import "./components/colors";
@import "./components/form";
@import "~vue2-animate/src/less/vue2-animate";

* {
  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
  color: inherit;
  box-sizing: border-box;
  margin: 0;
  text-decoration: none;
  outline: none;
  border: 0;
  padding: 0;
  list-style: none;
  font-size: inherit;
}

*::-webkit-scrollbar {
  display: block;
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-thumb {
  background-color: @font-color-dark-fade;
  border-radius: 6px;
}

*::-webkit-scrollbar-track {
  background-color: @theme-background-color;
}

input::-webkit-search-cancel-button {display: none;}

html, body {
  background-color: @theme-background-color;
  font-size: @small-font-size;
  min-width: @window-min-width;
  color: @font-color-dark;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
}

a {
  cursor: pointer;
  &:hover {
    &.primary-hover {
      text-decoration: underline;
      color: @theme-color;
    }
  }
}

img {
  vertical-align: middle;
}

.center {
  text-align: center;
}

.not-scroll {
  overflow: hidden;
}

.flex-text {
  display: flex;
  align-items: center;
}

//弹性盒子
.flex-box {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

//整屏居中
.container {
  height: 100vh;
  .flex-box();
}

.page {
  min-height: calc(100vh - @herder-height - @footer-height);
  margin-top: @herder-height;
}

.mask {
  background-color: fade(black, 30);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
  z-index: @mask-index;
  text-align: center;
  &:after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
  }
}

/*--------------------------------------*/
.card {
  background-color: white;
  .card-box-shadow();
  .card-header {
    border-bottom: 1px solid @font-color-dark-line;
  }

  .card-body {}

  .card-footer {
    border-top: 1px solid @font-color-dark-line;
  }
}

/*--------------------------------------*/
.duration {
   animation-duration: @default-animate-time;
   //transition: @default-animate-time;
 }

.short-duration {
  animation-duration: @short-animate-time;
  //transition: @short-animate-time;
}

.shortest-duration {
  animation-duration: @shortest-animate-time;
  //transition: @short-animate-time;
}

.mask-duration {
  animation-duration: @short-animate-time;
  //transition: @short-animate-time;
}

.cover {
  background: no-repeat 50%;
  background-size: cover;
  object-fit: cover;
}


/*---------------------------------------*/
.popper {
  z-index: @mask-index + 1;
  @arrow-size: 10px;
  .popper__arrow {
    &:after {
      content: " ";
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border: @arrow-size solid transparent;
    }
    & {
      filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border: @arrow-size solid transparent;
    }

  }
  &[x-placement^=top] {
    .popper__arrow {
      bottom: -@arrow-size;
      left: 50%;
      margin-right: @arrow-size / 2;
      border-top-color: @font-color-dark-line;
      border-bottom-width: 0;
      &:after {
        bottom: 1px;
        margin-left: -@arrow-size;
        border-top-color: #fff;
        border-bottom-width: 0;
      }
    }
  }
  &[x-placement^=right] {
    .popper__arrow {
      top: 50%;
      left: -@arrow-size;
      margin-bottom: @arrow-size / 2;
      border-right-color: @font-color-dark-line;
      border-left-width: 0;
      &:after {
        bottom: -@arrow-size;
        left: 1px;
        border-right-color: #fff;
        border-left-width: 0;
      }
    }
  }
  &[x-placement^=bottom] {
    .popper__arrow {
      top: -@arrow-size;
      left: 50%;
      margin-right: 3px;
      border-top-width: 0;
      border-bottom-color: @font-color-dark-line;
      &:after {
        top: 1px;
        margin-left: -@arrow-size;
        border-top-width: 0;
        border-bottom-color: #fff;
      }
    }
  }
  &[x-placement^=left] {
    .popper__arrow {
      top: 50%;
      right: -@arrow-size;
      margin-bottom: @arrow-size / 2;
      border-right-width: 0;
      border-left-color: @font-color-dark-line;
      &:after {
        right: 1px;
        bottom: -@arrow-size;
        margin-left: -@arrow-size;
        border-right-width: 0;
        border-left-color: #fff;
      }
    }
  }
}

//.popover {
//  position: absolute;
//  background-color: white;
//  z-index: @mask-index - 1;
//  border-radius: @smallest-border-radius;
//  .card-box-shadow();
//  &[x-placement^=top] {
//    margin-bottom: 12px;
//  }
//  &[x-placement^=right] {
//    margin-left: 12px;
//  }
//  &[x-placement^=bottom] {
//    margin-top: 12px;
//  }
//  &[x-placement^=left] {
//    margin-right: 12px;
//  }
//}

/*---------------------------------------*/
.tooltip{
  z-index: @mask-index + 2;
  background-color: @font-color-dark;
  color: @font-color-light;
  padding: 0 .5em;
  font-size: @small-font-size;
  line-height: @big-font-size;
}


/*---------------------------------------*/
.loading-parent {
  position: relative !important;
}

/*---------------------------------------*/
.scroll-box {
  position: relative !important;
}


/*---------------------------------------*/
.v-ripple__container {
  color: inherit;
  border-radius: inherit;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  contain: strict;
}

.v-ripple__animation {
  color: inherit;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  will-change: transform, opacity;
}

.v-ripple__animation--enter {
  transition: none;
}

.v-ripple__animation--in {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.v-ripple__animation--out {
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/*---------------------------------------*/
//一共30列
.row {
  width: 100%;
  &:before {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
    display: table;
    content: "";
  }

  .col(@number,@width) when (@number <= 30) {
    .col-@{number} {
      float: left;
      width: @number*@width;
    }
    @media only screen and (max-width: @grid-xs-width) {
      .col-xs-@{number} {
        float: left;
        width: @number*@width;
      }
    }
    @media (min-width: @grid-sm-width) and (max-width: @grid-md-width) {
      .col-sm-@{number} {
        float: left;
        width: @number*@width;
      }
    }
    @media (min-width: @grid-md-width) and (max-width: @grid-lg-width) {
      .col-md-@{number} {
        float: left;
        width: @number*@width;
      }
    }
    @media only screen and (min-width: @grid-lg-width) {
      .col-lg-@{number} {
        float: left;
        width: @number*@width;
      }
    }
    .col((@number+1), @width)
  }
  .col(1, @grid-column-width);
}

//一共30列
.flex-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: row;
  .col(@number,@width) when (@number <= 30) {
    .col-@{number} {
      width: @number*@width;
    }
    .col((@number+1), @width)
  }
  .col(1, @grid-column-width);
}

/*---------------------------------------*/
@keyframes dialog-persistent-animate {
  from, 0%, 25%, 50%, 75%, to {
    animation-timing-function: linear;
  }

  0% {
    transform: scale3d(1, 1, 1);
  }

  25% {
    transform: scale3d(.95, .95, .95);
  }

  50% {
    transform: scale3d(1, 1, 1);
  }
  75% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

.dialog-persistent-animate {
  -webkit-animation-name: dialog-persistent-animate;
  animation-name: dialog-persistent-animate;
}
